<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
	<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
	
	<title>dynatree - temporary tests</title>
	<!-- Include the required JavaScript libraries: -->
	<script src='../jquery/jquery.js' type='text/javascript'></script>
	<script src='../jquery/ui.core.js' type='text/javascript'></script>
	<script src='../jquery/jquery.cookie.js' type='text/javascript'></script>
	
	<link rel='stylesheet' type='text/css' href='../src/skin/ui.dynatree.css'>
	<script src='../src/jquery.dynatree.js' type='text/javascript'></script>
	
	<!-- Add code to initialize the tree when the document is loaded: -->
	<script type='text/javascript'>
    <!--
//    $.ui.dynatree.nodedatadefaults["icon"] = false; // Turn off icons by default
	$(function(){
		$("#tree").dynatree({
			rootVisible: true,
			rootCollapsible: false,
			keyboard: true,
			persist: true,
			clickFolderMode: 2,
			children: [
				{title: "Node 1", expand: true, key: "_1",
				 children: [
					{title: "Node 1.1" },
					{title: "Node 1.2", isFolder: true, expand: true, key: "_12",
						 children: [
									{title: "Node 1.2.1" },
									{title: "Node 1.2.2", key: "_122",
										 children: [
													{title: "Node 1.2.2.1" },
													{title: "Node 1.2.2.2" },
													{title: "Node 1.2.2.3" }
													]
										 },
									{title: "Node 1.2.3",
										children: []
									}
									]
						 },
					{title: "Node 1.3" }
					]
					},
				{title: "Node 2" }
			],
			onSelect: function(dtnode) {
				$("#echoSelected").text(dtnode.data.title);
				//alert("You selected " + dtnode.data.title);
			},
			onLazyRead: function(dtnode) {
				logMsg("Benchmarking mode='" + dtnode.data.mode + "' done.");
			}
		});
		$("#tree2").dynatree({
			onSelect: function(dtnode) {
				$("#echoSelected").text(dtnode.data.title);
				//alert("You selected " + dtnode.data.title);
			}
		});
		$("#btnRemoveDiv").click(function(){
			logMsg("removing %o", $("#tree"));
			$("#tree").remove();
		});
		$("#btn50").click(function(){
			$("#tree").dynatree("getRoot").addChild({title: 'i50', expand: true});
		});
		$("#btn21").click(function(){
			$("#tree").dynatree("getTree").getNodeByKey("_12").removeChildren();
		});
		$("#btn22").click(function(){
			$("#tree").dynatree("getTree").getNodeByKey("_122").remove();
		});
		$("#btnUnbind").click(function(){
//			logMsg("fn=%o", fnKeyHandler);
			$("#tree").dynatree("bindKeys", false);
		});
	});


    -->
    </script>
</head>
<body>
	<P>This file is only temporarily used to reproduce issues.</P>
	<p style="color: red;">Using doctype HTML 4.01 Strict.</p>
	<div id='tree'> </div>

	<div>Selected node: <span id="echoSelected">-</span></div>
	<div>Focused node: <span id="echoFocused">-</span></div>
    <p>
        <button id="btnRemoveDiv">Remove main div</button>
        <button id="btn50">issue #50</button>
        <button id="btnDiv">dynamic div issue</button>
        <button id="btn21">remove 1.2 children</button>
        <button id="btn22">remove 1.2.2</button>
        <button id="btnUnbind">unbind</button>
    </p>
	<div id='tree2'>
	<ul>
	<li data="{title: 'node1'}">node1</li>
	<li data="{title: 'node2'}">node2</li>
	</ul>
	</div>


	<p><a href="http://dynatree.googlecode.com">jquery.dynatree.js</a></p>
</body>
</html>
